import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:mall/core/providers/pages/mine/user_password_update_model.dart';
import 'package:mall/core/providers/view_model.dart';
import 'package:provider/provider.dart';

class UserPasswordPage extends StatelessWidget {
  static const routeName = '/UserPasswordPage';
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => UserPasswordUpdateModel(Provider.of(context, listen: false)),
      child: Scaffold(
        appBar: AppBar(
          title: Text('修改密码'),
        ),
        body: SingleChildScrollView(
          child: Builder(
            builder: (context) {
              UserPasswordUpdateModel model = Provider.of(context, listen: false);
              return Column(
                children: <Widget>[
                  _WrapContainer(
                    child: TextFormField(
                      decoration: InputDecoration(
                        hintText: '旧密码',
                      ),
                      obscureText: true,
                      onChanged: (value) {
                        model.oldPassword = value;
                      },
                    ),
                  ),
                  _WrapContainer(
                    margin: EdgeInsets.only(top: 8),
                    child: TextFormField(
                      decoration: InputDecoration(
                        hintText: '新密码',
                      ),
                      obscureText: true,
                      onChanged: (value) {
                        model.newPassword = value;
                      },
                    ),
                  ),
                  _WrapContainer(
                    margin: EdgeInsets.only(top: 8),
                    child: TextFormField(
                      decoration: InputDecoration(
                        hintText: '确认密码',
                      ),
                      obscureText: true,
                      onChanged: (value) {
                        model.newPasswordConfirm = value;
                      },
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.all(16),
                    width: double.maxFinite,
                    child: Consumer<UserPasswordUpdateModel>(
                      builder: (context, model, child) {
                        switch (model.viewState) {
                          case ViewState.busy:
                            return RaisedButton(
                              onPressed: null,
                              child: SizedBox(
                                child: CircularProgressIndicator(),
                              ),
                            );
                          default:
                            return RaisedButton(
                              onPressed: () {
                                _onUpdateClicked(context);
                              },
                              child: Text(
                                '确定',
                                style: TextStyle(fontSize: 18),
                              ),
                            );
                        }
                      },
                    ),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }

  void _onUpdateClicked(BuildContext context) async {
    UserPasswordUpdateModel model = Provider.of(context, listen: false);
    var viewState = await model.userPasswordUpdate();
    switch (viewState) {
      case ViewState.error:
        EasyLoading.showToast(model.errorMessage);
        break;
      default:
        EasyLoading.showToast('更新成功');
        Navigator.of(context).pop();
        break;
    }
  }
}

class _WrapContainer extends StatelessWidget {
  final EdgeInsetsGeometry margin;
  final Widget child;

  _WrapContainer({
    Key key,
    this.margin,
    this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(horizontal: 16),
      color: Colors.white,
      height: 50,
      margin: margin,
      child: child,
    );
  }
}
